<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <keep-alive :max="10">
        <components :is="coms[currentIndex]"></components>
      </keep-alive>
    </transition>
     
     <Tabber></Tabber>
  </div>
</template>

<script>
import Order from "./components/order.vue"
import Myown from "./components/Myown.vue"
import Home from "./components/Home.vue"
import Tabber from "./components/Tabber.vue"
import eventbus from './Utils/tools'
export default {
  data(){
    return{
      currentIndex:0,
      coms:[Home,Order,Myown]
    }
  },
  components:{
    Tabber
  },
  mounted(){
    eventbus.$on("Tmsg",(res)=>{
      this.currentIndex=res
    })
  },
}
</script>

<style lang="scss" >
*{
  margin: 0;
  padding: 0;
}
.fade-enter{
  opacity: 1;
}
.fade-enter-active{
  transition: all 0.3s;
}
.fade-enter-to{
  opacity: 0;
}
.fade-leave{
  opacity: 0;
}
.fade-leave-active{
  transition: all 0.2s;
}
.fade-leave-to{
  opacity: 1;
}
</style>
